<template>
  <div class="systemPage-wrapper">
    <div class="topbar">
      <span class="iconfont icongongnengcaidan-ziliaoguanli titleIcon"></span>
      <span>资金科目管理</span>
    </div>
    <div class="content-background">
      <div class="left-tree content-wrapper">
        <span class="title">资金科目选择</span>
        <Tree dropMenuShow="true" ref="fundTree" :dropMenuList="dropMenu" :params="fundTreeParams"
          @accountOperations="accountOperations" @getNodeInfo="getAccountInfo" />

      </div>
      <div class="right-board content-wrapper">
        <div class="accountInfo-wrapper" v-if="accountInfoShow">
          <div class="title-wrapper">
            <span class="name">{{ accountInfo.name }}管理</span>
            <span class="systemButtonConfirm" @click="accountInfoSave">保存</span>
          </div>
          <el-form class="systemForm" :model="accountInfo" label-width="120px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="资金科目名称：">
                  <el-input class="systemInput" v-model="accountInfo.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="资金科目编号：">
                  <el-input class="systemInput" v-model="accountInfo.code"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="职能部门：" class="inline-row">
                  <el-input class="systemInput" v-model="accountInfo.fName"></el-input>
                  <i class="el-icon-more" @click="selectFillDept(0)"></i>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="分管副总：" class="inline-row">
                  <el-input class="systemInput" v-model="accountInfo.manageUserName"></el-input>
                  <i class="el-icon-more" @click="selectFillDept(1)"></i>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
            </el-row>
            <el-form-item label="备注：">
              <el-input class="systemInput" resize="none" type="textarea" rows="4" placeholder="请输入内容"
                v-model="accountInfo.note"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="maskCenter" v-if="treeShow">
      <div class="systemDialog" style="width: 473px;height: 400px;">
        <div class="dialog-header" v-winmove>
          <span>{{ treeTitle }}</span>
        </div>
        <div class="dialog-body">
          <OrganizationTree v-if="treeShow" ref="tree" :type="treeType" :propsParam="treeParam"
            @getNodeInfo="getNodeInfo" />
        </div>
        <div class="dialog-footer right">
          <span class="systemButtonConfirm" @click="treeSave">确定</span>
          <span class="systemButtonCancel" @click="closeOrganizationTree">取消</span>
        </div>
      </div>
    </div>
    <div class="businessMask" v-if="deptMapShow">
      <div class="businessDialog middle">
        <div class="dialog-header" v-winmove>
          <span>部门选择</span>
        </div>
        <div class="dialog-body">
          <el-table ref="deptMapTable" :data="deptMap" class="businessTable" @selection-change="handleDeptChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="部门名称"></el-table-column>
            <el-table-column prop="parentDept" label="父级部门"></el-table-column>
            <el-table-column prop="code" label="部门编码"></el-table-column>
          </el-table>
        </div>
        <div class="dialog-footer right">
          <span class="businessButtonCancel" @click="getDeptId">确定</span>
          <span class="businessButtonCancel" @click="deptMapShow = false">取消</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Tree from '@/business/components/fundAccountTree'
import { fundAccountDetail, fundAccountSave, fundAccountDelete } from '@/business/api/fundAccount'
import { roleDetail } from "@/system/api/organization/roleManage";
import winmove from '@/directives/winmove'
import OrganizationTree from '@/system/components/organizationTree'
import { getFillDept } from "@/system/api/organization/organization";

export default {
  data() {
    return {
      dropMenu: [],
      accountInfo: null,
      accountInfoShow: false,
      deptMap: [],
      personMap: [],
      treeShow: false,
      treeTitle: null,
      treeParam: null,
      organizationTreeInfo: null,
      accountNodeInfo: null,
      fundTreeParams: {
        funcId: this.$route.meta.funcId,
      },
      deptMapShow: false,
      checkedDept: [],
      newDeptInfo: {},
      manageUserTreeShow: false,
      treeType: null
    }
  },
  components: {
    Tree,
    OrganizationTree,
  },
  directives: {
    winmove,
  },
  methods: {
    async accountOperations(e) {
      if (e === 2) { // 删除
        this.accountDelete()
      } else {
        this.organizationTreeInfo = {}
        this.accountInfo = {
          name: null,
          code: null,
          eId: this.$store.state.user.info.unitId,
          fId: null,
          manageUserId: null,
          fillUserId: this.$store.state.user.info.id,
          fillUser: this.$store.state.user.info.name,
          fillDeptId: null,
          fillDept: this.$store.state.user.info.deptName,
          note: null
        }
        if (!e) { // 新增同级
          this.accountInfo.pId = this.accountNodeInfo.data.pId
        } else { // 新增下级
          this.accountInfo.pId = this.accountNodeInfo.data.id
          this.accountNodeInfo.operationType = 1
        }
        getFillDept({
          funcId: this.$route.meta.funcId,
          type: 2,
        }).then((res) => {
          if (res.info.length > 1) {
            this.deptMap = res.info
            this.deptMapShow = true
          } else {
            this.accountInfo.fillDeptId = this.$store.state.user.info.deptId
            this.accountInfoShow = true
          }
        })
      }
    },
    accountDelete() {
      this.messageBox('确认删除？').then((c) => {
        if (c.action) {
          fundAccountDelete({ id: this.accountNodeInfo.data.id }).then(res => {
            if (res.success) {
              this.$refs.fundTree.refreshNode(this.accountNodeInfo)
              this.message(res.msg, 1)
            } else {
              this.message(res.msg, 3)
              return
            }
          })
        }
      })
    },
    // 树节点点击
    async getAccountInfo(e) {
      this.accountInfoShow = false
      if (e.clickType) { // 鼠标左击
        fundAccountDetail({ id: e.id }).then(res => {
          if (res.success) {
            this.accountInfo = JSON.parse(JSON.stringify(res.info))
            if (this.accountInfo.manageUserId) { // 分管副总
              roleDetail({ id: this.accountInfo.manageUserId }).then(res => {
                if (res.success) {
                  this.accountInfo.manageUserName = res.info.name
                  this.accountInfoShow = true
                }
              })
            } else {
              this.accountInfoShow = true
            }

          } else {
            this.message(res.msg, 3)
          }
        })
      } else { // 鼠标右击
        this.dropMenu = e.level === 1 ? [
          {
            index: 1,
            label: '新增下级',
            icon: 'icon iconfont iconzengjia',
          }, {
            index: 2,
            label: '删除科目',
            icon: 'icon iconfont iconbiaoge-shanchu',
          },
        ] : [
          {
            index: 0,
            label: '新增同级',
            icon: 'icon iconfont iconzengjia',
          },
          {
            index: 1,
            label: '新增下级',
            icon: 'icon iconfont iconzengjia',
          }, {
            index: 2,
            label: '删除科目',
            icon: 'icon iconfont iconbiaoge-shanchu',
          },
        ]
        this.accountNodeInfo = e
      }
    },
    // 保存
    accountInfoSave() {
      if (!this.accountInfo.name) {
        this.message('请输入资金科目名称', 3)
        return
      }
      if (!this.accountInfo.code) {
        this.message('请输入资金科目编号', 3)
        return
      }
      fundAccountSave(this.accountInfo).then(res => {
        if (res.success) {
          if (this.accountInfo.id) {
            const node = {
              level: 0
            }
            this.$refs.fundTree.refreshNode(node)
          } else {
            this.$refs.fundTree.refreshNode(this.accountNodeInfo)
          }
          this.message(res.msg, 1)
        } else {
          this.message(res.msg, 3)
          return
        }
      })
    },
    // 选职能部门&分管副总
    selectFillDept(e) {
      if (!e) {
        this.treeTitle = '职能部门选择'
        this.treeType = 0
        this.treeParam = {
          parentId: this.$store.state.user.info.unitId,
          userFlag: false,
          type: 0
        }
      } else {
        this.treeTitle = '分管副总选择'
        this.treeType = 1
        this.treeParam = {
          parentId: 600,
          type: 0
        }
      }
      this.treeShow = true
    },
    treeSave() {
      if (this.treeTitle === '职能部门选择') {
        if (!this.organizationTreeInfo.id) {
          this.message('请选择部门', 3)
          return
        }
        this.accountInfo.fId = this.organizationTreeInfo.id
        this.accountInfo.fName = this.organizationTreeInfo.name
      } else {
        if (!this.organizationTreeInfo.id) {
          this.message('请选择角色', 3)
          return
        }
        this.accountInfo.manageUserId = this.organizationTreeInfo.id
        this.accountInfo.manageUserName = this.organizationTreeInfo.name
      }
      this.treeShow = false
    },
    getNodeInfo(e) {
      if (e.clickType) {
        this.organizationTreeInfo = JSON.parse(JSON.stringify(e))
      }
    },
    handleDeptChange(e) {
      if (e.length > 1) {
        this.$refs.deptMapTable.clearSelection();
        this.$refs.deptMapTable.toggleRowSelection(e.pop());
      }
      this.checkedDept = e;
    },
    getDeptId() {
      if (!this.checkedDept.length) {
        this.message('请选择部门', 3)
        return
      }
      this.accountInfo.fillDeptId = this.checkedDept[0].id
      this.deptMapShow = false
      this.accountInfoShow = true
    },
    closeOrganizationTree() {
      this.organizationTreeInfo = {}
      this.treeShow = false
    }
  }
}
</script>

<style lang="scss">
.systemPage-wrapper .content-background {
  display: flex;

  .left-tree .title,
  .right-board .accountInfo-wrapper .name {

    display: inline-block;
    font-weight: bold;
    font-size: 16px;
    padding: 0 12px;
    position: relative;
    color: var(--organization-tabs-text-color);
    text-align: left;

    &::before {
      content: '';
      display: block;
      width: 4px;
      height: 20px;
      background: rgba(83, 167, 255, 1);
      border-radius: 2px;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .left-tree {
    width: 320px;
    overflow: auto;

    .title {
      margin: 16px;
    }
  }

  .right-board {
    width: calc(100% - 332px);
    margin-left: 12px;

    .accountInfo-wrapper {
      height: 100%;

      .title-wrapper {
        height: 52px;
        width: calc(100% - 32px);
        margin: 0 16px;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid var(--organization-title-underline-color);
      }

      .el-form {
        height: calc(100% - 52px);
        overflow: auto;
        padding-top: 40px;
        padding-left: 90px;

        .el-form-item {
          padding-right: 90px;

          &.inline-row .el-form-item__content {
            .el-input {
              width: calc(100% - 48px);
            }

            i {
              float: right;
              cursor: pointer;
              color: rgba(64, 158, 255, 1);
              width: 40px;
              height: 32px;
              line-height: 32px;
              background: rgba(153, 153, 153, 0);
              border: 1px solid rgba(190, 190, 190, 1);
              border-radius: 4px;
              margin-left: 8px;
            }
          }
        }
      }
    }
  }
}
</style>
